<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/clear.css">
    <link rel="stylesheet" href="../css/cart.css">
    <title>购物车</title>
</head>

<body>
    <header>
    </header>
    <!-- 购物车 -->
    <div class="shop-box">
        <div class="shop">
            <!-- <hr> -->
            <div class="shop-bj">
                <div class="tabHeader">
                    <span class="sp">商品</span>
                    <span class="jg">价格</span>
                    <span class="sl">数量</span>
                    <span class="hj">合计</span><br>
                    <p class="brd"></p>
                </div>
                <!-- 物品 -->
                <table class="orderMsg">
                    <tr>
                        <td class="iconP padd delBtn">
                            <svg class="iconC" aria-hidden="true">
                                <use xlink:href="#icon-cha"></use>
                            </svg>
                        </td>
                        <td class="imgP padd">
                            <img src="../img/4.webp">
                        </td>
                        <td class="spanP">
                            <!-- 货物价钱 -->
                            <span>紫砂壶</span>
                        </td>
                        <td class="jgP padd">
                            <!-- 货物小计 -->
                            ￥<span class="goods-price">500</span>
                        </td>
                        <td class="numP padd">
                            <button>&nbsp;-&nbsp;</button>
                            <!-- 货物数量 -->
                            <span class="goods-num">1</span>
                            <button>&nbsp;+&nbsp;</button>
                        </td>
                        <td class="hjP padd">
                            ￥<span class="goods-subtotal">500</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="zj">
                <div class="zj-top">
                    <!-- <p class="left-brd"></p> -->
                    <ul class="rtFourL">
                        <li class="borBottom">购物车总计</li>
                        <li class="borBottomR goods-total-num">1</li>
                        <li>购物车小计</li>
                        <li class="borBottomXR">免费送货</li>
                        <li class="borBottomX">运费</li>
                        <li class="borBottomR">￥500</li>
                        <li class="borBottom">订单总计</li>
                    </ul>
                    <input type="button" name="" id="" value="前往收银台" class="qwsyt" />
                    <p class="pp">优惠券:</p>
                    <input type="text" name="" id="" value placeholder="优惠券代码" class="yhqdm" />
                    <input type="button" name="" id="" value="使用优惠券" class="syyhq" />
                </div>
            </div>
        </div>
    </div>
    <footer>
    </footer>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
</script>
<script>
    //自定义 购物车 类
    class Cart {
        //获取数量
        updateGoodsNum() {
            //获得货物数量
            let oGoodsNum = document.getElementsByClassName("goods-num");
            //起变量名 
            let goodsTotalNum = 1;
            //将货物数量 数组给总货物数量    将货物的总数赋值给goodsTotalNum
            for (let i = 1; i < oGoodsNum.length; i++) {
                //定义的变量等于   数量.在页面的值 内容    从页面获取的都是字符串 所以 Number() 转成数字
                goodsTotalNum += Number(oGoodsNum[i].innerHTML);
            }
            //获取 货物总数目
            // let oGoodsTotalNum = document.getElementsByClassName("goods-total-num")[0];
            // //货物总数目等于 
            // oGoodsTotalNum.innerHTML = goodsTotalNum;
        }
        //获取总价格
        updateGoodsPrice() {
            //获取货物价格         			找对象 找到小计
            let oGoodsSubtotal = document.getElementsByClassName("goods-subtotal");
            //起变量名
            let goodsTotalSubtotal = 1;
            //将货物小计 数组给总货物小计   将货物的总小计赋值给goodsTotolSubtotal
            for (let i = 1; i < oGoodsSubtotal.length; i++) {
                //定义的变量等于          小计.在页面显示的值 内容       从页面获取的都是字符串 所以 Number() 转成数字
                goodsTotalSubtotal += Number(oGoodsSubtotal[i].innerHTML);
            }
            //找对象   获取货物总小计
            // let oGoodsTotalSubtotal = document.getElementsByClassName("goods-total-subtotal")[0];
            // //总小计等于 定义的变量
            // oGoodsTotalSubtotal.innerHTML = goodsTotalSubtotal;
        }
        //0. 数量 * 单价  等于 小计 的方法
        getGoodsSubtotal(num, price) {
            return num * price;
        }
        //货物和
        goodAdd(btn) {
            //1.数量加1          +  btn的上一个节点          数量找到了
            let oGoodsNum = btn.previousElementSibling;
            //数量 在页面上的内容     等于  它自身+1
            oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
            //2.获取单价   单价等于btn+号 父节点的下一个节点的子节点
            let oGoodsPrice = btn.parentNode.previousElementSibling.firstElementChild;
            //3.获取小计          小计等于 btn+ 父节点的兄弟节点 的 兄弟节点  的 子节点 就是小计
            let oGoodsSubtotal = btn.parentNode.nextElementSibling.firstElementChild;
            //小计页面上的内容 等于 0方法     数量,单价(oGoodsNum.innerHTML,oGoodsPrice.innerHTML);
            oGoodsSubtotal.innerHTML = this.getGoodsSubtotal(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);
            //4.总数量
            this.updateGoodsNum();
            //5.总价格
            this.updateGoodsPrice();
        }
        //货物减
        goodMin(btn) {
            //1.数量加1          -  btn的兄弟节点  就是0         数量找到了
            let oGoodsNum = btn.nextElementSibling;
            //如果数量在页面的内容大于0 才能减 
            if (oGoodsNum.innerHTML > 1) {
                //数量 在页面上的内容     等于  它自身-1
                oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) - 1;
                //2.获取单价   单价等于btn-号 父节点的下一个节点的子节点
                let oGoodsPrice = btn.parentNode.previousElementSibling.firstElementChild;
                //3.获取小计          小计等于 btn-父节点的兄弟节点 的 兄弟节点  的 子节点 就是小计
                let oGoodsSubtotal = btn.parentNode.nextElementSibling.firstElementChild;
                //小计页面上的内容 等于 0方法     数量,单价(oGoodsNum.innerHTML,oGoodsPrice.innerHTML);
                oGoodsSubtotal.innerHTML = this.getGoodsSubtotal(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);
                //4.总数量方法
                this.updateGoodsNum();
                //5.总价格方法
                this.updateGoodsPrice();
            }
        }

        eventBind() {
            //获取点击按钮 
            let oBtns = document.getElementsByTagName("button");
            //全局变量  this 就是 Cart
            let AAA = this;

            //遍历每个btn    btn 下边  -0 +1  -2  +3
            for (let i = 0; i < oBtns.length; i++) {
                //如果btn 是下标[0] [1] [2] [3]  true=1 false=0
                if (i % 2) {
                    oBtns[i].onclick = function () {
                        AAA.goodAdd(this);
                    }
                } else {
                    oBtns[i].onclick = function () {
                        AAA.goodMin(this);
                    }
                }
            }
        }
    }
    let c = new Cart();
    c.eventBind();

    // 删除
    $(".delBtn").click(function () {
        $(".orderMsg").remove();
    })
</script>